<template>
<div class="eagg">
  <van-list  >
      <div class="product" v-for="item in TravelWearlist" :key="item._id" @click="goDetail(item.id)">
        <div class="product_r">
          <img :src="item.product" alt="" />
          <div class="rong">
            <div class="name">{{ item.name }}</div>
            <div class="price">￥{{ item.price }}</div>
          </div>
        </div>
      </div>
    </van-list>
</div>
 
</template>

<script>
import axios from "axios";
import {  TravelWear } from "@/config/http";
export default {
  data() {
    return {
      TravelWearlist: [],
    };
  },
  methods: {
    TravelWear() {
      axios.get(TravelWear).then((res) => {
        console.log(res.data);
        this.TravelWearlist = res.data;
      });

      console.log(this.TreeWalker);
    },
     // 详情
     goDetail(id) {
      const goodId = id;
      // this.$router.push(`/detail/${id}`);
      this.$router.push({
        name: "Detail",
        query: {
          id: goodId,
        },
      });
    },
  },
  created() {
    this.TravelWear();
  },
};
</script>

<style scoped>
.eagg {
  position: relative;
  top: -459px;
  right: 0px;
}
.van-grid {
  margin-top: 20px;
}

.nav {
  width: 100%;
  height: 50px;
  background-color: #fff;
  position: fixed;
  top: 0;
  left: 0;
  z-index: 10;
  overflow: hidden;
}
.logo {
  width: 30px;
  margin: 20px 20px;
  float: left;
}
.logo img {
  width: 100%;
}

.van-swipe img {
  width: 100%;
  height: 220px;
}
.homepage {
  overflow: hidden;
  padding-bottom: 40px;
}
.product {
  margin-top: 20px;
  margin-left: 80px;
}
.product .product_r {
  width: 40%;
  float: left;
  margin-top: 30px;
  margin-left: 20px;
}
.product .product_r img {
  width: 80px;
  display: block;
  margin: 0 auto;
}
.product .product_r .rong {
  width: 100%;
  margin-top: 20px;
}
.product .product_r .rong .name {
  width: 80px;
  text-align: center;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.product .product_r .price {
  margin-top: 10px;
  /* text-align: center; */
  color: red;
}
.van-list {
  padding-bottom: 40px;
}
.van-image {
  width: 10em;
  height: 10em;
  background: antiquewhite;
}
.van-grid-item__content {
  background-color: bisque;
}
</style>